<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标滑动星星打分生活美食网站星级评分</title>
<meta name="description" content="jquery鼠标滑动星星打分，制作生活美食网站星级评分，口味、环境数字星级评分。一款非常实用的jQuery星级评分。" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* starbox */
.starbox{width:480px;margin:20px auto;height:30px;}
.fl{float:left;display:inline;}
.s_name{float:left;display:block;width:60px;text-align:right;}
.star_ul{background:url(images/star.png) no-repeat 0 -150px;width:132px;z-index:10;position:relative;height:25px;}
.star_ul li{float:left;margin-right:1px;width:25px;height:25px;}
.star_ul li a{display:block;height:25px;position:absolute;left:0;top:0;text-indent:-999em;}
.star_ul li .active-star{background:url(images/star.png) no-repeat;}
.star_ul li .one-star{width:25px;background-position:0 -120px;z-index:50;}
.star_ul li .two-star{width:51px;background-position:0 -90px;z-index:40;}
.star_ul li .three-star{width:79px;background-position:0 -60px;z-index:30;}
.star_ul li .four-star{width:105px;background-position:0 -30px;z-index:20;}
.star_ul li .five-star{width:129px;margin-right:0;background-position:0 0;z-index:10;}
.s_result{padding:6px 0 0 5px;}

.square_ul{background:url(images/star.png) no-repeat 0 -222px;width:146px;z-index:10;position:relative;height:20px;}
.square_ul li{float:left;margin-right:1px;width:29px;height:20px;}
.square_ul li a{display:block;height:20px;position:absolute;left:0;top:0;text-indent:-999em;}
.square_ul li .active-square{background:url(images/star.png) no-repeat;}
.square_ul li .square-1{width:29px;background-position:0 -243px;z-index:50;}
.square_ul li .square-2{width:58px;background-position:0 -264px;z-index:40;}
.square_ul li .square-3{width:87px;background-position:0 -285px;z-index:30;}
.square_ul li .square-4{width:116px;background-position:0 -306px;z-index:20;}
.square_ul li .square-5{width:145px;margin-right:0;background-position:0 -327px;z-index:10;}
.s_result_square{padding:4px 0 0 9px;}
</style>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	
	$('.star_ul a').hover(function(){
		$(this).addClass('active-star');
		$('.s_result').css('color','#c00').html($(this).attr('title'))
	},function(){
		$(this).removeClass('active-star');
		$('.s_result').css('color','#333').html('请打分')
	});
	
	$('.star_ul a').click(function(){
		alert($('.s_result').html());
	});
	
	$('.square_ul a').hover(function(){
		$(this).addClass('active-square');
		$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title'))
	},function(){
		$(this).removeClass('active-square');
		$(this).parents('.starbox').find('.s_result_square').css('color','#333').html('请打分')
	});
	
	$('.square_ul a').click(function(){
		alert($(this).parents('.starbox').find('.s_result_square').html());
	});
})
</script>

<div class="starbox">
	<span class="s_name">总体评价：</span>
	<ul class="star_ul fl">
		<li><a class="one-star" title="很差" href="#"></a></li>
		<li><a class="two-star" title="差" href="#"></a></li>
		<li><a class="three-star" title="还行" href="#"></a></li>
		<li><a class="four-star" title="好" href="#"></a></li>
		<li><a class="five-star" title="很好" href="#"></a></li>
	</ul>
	<span class="s_result fl">请打分</span>
</div>

<div class="starbox">
	<span class="s_name">口味：</span>
	<ul class="square_ul fl">
		<li><a class="square-1" title="差" href="#"></a></li>
		<li><a class="square-2" title="一般" href="#"></a></li>
		<li><a class="square-3" title="好" href="#"></a></li>
		<li><a class="square-4" title="很好" href="#"></a></li>
		<li><a class="square-5" title="非常好" href="#"></a></li>
	</ul>
	<span class="s_result_square fl">请打分</span>
</div>

<div class="starbox">
	<span class="s_name">环境：</span>
	<ul class="square_ul fl">
		<li><a class="square-1" title="差" href="#"></a></li>
		<li><a class="square-2" title="一般" href="#"></a></li>
		<li><a class="square-3" title="好" href="#"></a></li>
		<li><a class="square-4" title="很好" href="#"></a></li>
		<li><a class="square-5" title="非常好" href="#"></a></li>
	</ul>
	<span class="s_result_square fl">请打分</span>
</div>

</body>
</html>
